<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    text-color="#000">
    <template v-for="item of data">
      <el-menu-item
        :index="item.famPortalMenuV.id.toString()"
        :key="item.famPortalMenuV.id"
        v-if="!item.childMenuList || !item.childMenuList.length">
        <div class="icon" :class="'icon-' + item.famPortalMenuV.icons"></div>
        <!-- <img class="icon" :src="item.famPortalMenuV.icons || icons" alt=""> -->
        <div class="name">{{item.famPortalMenuV.sceneName}}</div>
      </el-menu-item>
      <el-submenu :index="item.famPortalMenuV.id.toString()" :key="item.famPortalMenuV.id" v-else>
        <template slot="title">
          <div class="icon" :class="'icon-' + item.famPortalMenuV.icons"></div>
          <!-- <img class="icon" :src="item.famPortalMenuV.icons || icons" alt=""> -->
          <div class="name">{{item.famPortalMenuV.sceneName}}</div>
        </template>
        <sub-menu :data="item.childMenuList"></sub-menu>
      </el-submenu>
    </template>
  </el-menu>
</template>

<script>
import icons from '../assets/default.png';
import subMenu from './subMenu';

export default {
  name: 'navMenu',
  components: { subMenu },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      activeIndex: '',
      icons,
    };
  },
  methods: {
    handleSelect(index, indexPath) {
      let data = this.data.slice(0);
      let item = null;
      indexPath.forEach((el) => {
        item = data.filter(d => d.famPortalMenuV.id.toString() === el)[0];
        if (item) {
          data = item.childMenuList;
        }
      });
      this.$emit('change', item);
    },
  },
};
</script>

<style lang="scss">
.el-menu.el-menu--popup {
  // max-height: 200px;
  .el-submenu__title {
    height: 43px;
    line-height: 43px;
  }
  li {
    border-top: 1px solid #cdcdcd;
    margin: 0 15px;
    height: 43px!important;
    line-height: 43px!important;

    &:nth-child(1) {
      border-top: none;
    }
  }
  .el-menu-item {
    position: relative;

    &:hover {
      color: #d50c0e!important;
    }
  }
  .el-submenu.is-opened>.el-submenu__title {
    color: #d50c0e!important;
  }
}
.el-menu-demo {
  .el-submenu__title,
  .el-menu-item {
    &:hover {
      color: #d50c0e!important;
      @for $i from 1 to 7 {
        .icon-0#{$i} {
          background: url(../assets/0#{$i}_active.png) center center no-repeat!important;
        }
      }
    }

    .el-icon-arrow-down {
      display: none;
    }

    div.icon {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      background: url(../assets/default.png) center center no-repeat;

      @for $i from 1 to 7 {
        &.icon-0#{$i} {
          background: url(../assets/0#{$i}.png) center center no-repeat;
        }
      }
    }

    div.name {
      word-break: break-all;
      display: inline-block;
      white-space:pre-wrap;
      width: 95px;
      height: 60px;
      line-height: 20px;
      position: absolute;
      bottom: 20px;
      left: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
